<template>
  <div>
    <a-modal
        v-model:visible="addUserFormVisible"
        :title="title"
        :confirm-loading="addUserFromConfirmLoading"
        @ok="addUser"
        @cancel="handleClose"
    >
      <div class="form_box">
        <a-form
            :model="formState"
            v-bind="layout"
            name="nest-messages"
            :validate-messages="validateMessages"
            ref="userForm"
        >
          <a-form-item :name="['user', 'username']" label="用户名" :rules="[{ required: true }]">
            <a-input v-model:value="formState.user.username"/>
          </a-form-item>
          <a-form-item :name="['user', 'password']" label="密码" :rules="[{ required: true }]">
            <a-input v-model:value="formState.user.password" type="password"/>
          </a-form-item>
          <a-form-item :name="['user', 'campusId']" label="校区" :rules="[{  required: true }]">
            <a-select
                ref="select"
                v-model:value="formState.user.campusId"
                style="width: 200px"
                @change="handleChange"
            >
              <a-select-option v-for="item in campusList" :value="item.campusId">{{ item.campusName }}</a-select-option>

            </a-select>
          </a-form-item>
          <a-form-item :name="['user', 'deptId']" label="部门" :rules="[{  required: true }]">
            <a-select
                ref="select"
                v-model:value="formState.user.deptId"
                style="width: 200px"
            >
              <a-select-option v-for="item in deptList" :value="item.deptId">{{ item.deptName }}</a-select-option>

            </a-select>
          </a-form-item>
          <a-form-item :name="['user', 'mobile']" label="联系电话" :rules="[{ required: true }]">
            <a-input v-model:value="formState.user.mobile"/>
          </a-form-item>
          <a-form-item :name="['user', 'email']" label="邮箱" :rules="[{ required: true,type: 'email' }]">
            <a-input v-model:value="formState.user.email"/>
          </a-form-item>
          <a-form-item :name="['user', 'roleId']" label="角色" :rules="[{ required: true }]">
            <a-select
                ref="select"
                v-model:value="formState.user.roleId"
                style="width: 200px"
            >
              <a-select-option v-for="item in roleList" :value="item.roleId">{{ item.roleName }}</a-select-option>

            </a-select>
          </a-form-item>
        </a-form>

      </div>

    </a-modal>
  </div>
</template>

<script>
import {onBeforeMount, reactive, ref} from "vue";
import {getCampusList} from "@/apis/campus";
import {getDeptListByCampId} from "@/apis/dept";
import {getRoleList} from "@/apis/role";
import {add} from "@/apis/user";
import {message,} from 'ant-design-vue';

export default {
  name: "UserForm",
  props: {
    title: {
      type: String,
      default: "添加用户"
    }
  },

  setup(props) {

    const addUserFormVisible = ref(false)
    const addUserFromConfirmLoading = ref(false);
    const title = props.title
    const campusList = ref([])
    const deptList = ref([])
    const roleList = ref([])

    onBeforeMount(() => {

      getCampusList().then(res => {
        campusList.value = res.data;
      })

      getRoleList().then(res => {
        roleList.value = res.data;
      })

    })


    const layout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const validateMessages = {
      required: '${label} is required!',
      types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
      },
      number: {
        range: '${label} must be between ${min} and ${max}',
      },
    };

    let formState = reactive({
      user: {
        userId:'',
        username: '',
        password: '',
        campusId: '',
        deptId: '',
        mobile: '',
        email: '',
        roleId: ''
      },
    });


    const handleChange = (value) => {
      getDeptListByCampId(value).then(res => {
        deptList.value = res.data
      })
    }

    const reset = () => {
      const user = {
        username: '',
        password: '',
        campusId: '',
        deptId: '',
        mobile: '',
        email: '',
        roleId: ''
      }
      Object.assign(formState.user, user);
    }

    const handleClose = () => {
      reset()
    }


    const isVisible = () => {
      addUserFormVisible.value = true;
    }

    const addUser = () => {
      addUserFromConfirmLoading.value = true;
      setTimeout(() => {
        addUserFormVisible.value = false;
        addUserFromConfirmLoading.value = false;
        add(formState.user).then(res => {
          if (res.data === true) {
            message.success("添加用户成功")
          }
        })

      }, 2000);
    }

    return {
      addUserFromConfirmLoading,
      addUser,
      addUserFormVisible,
      isVisible,
      formState,
      layout,
      validateMessages,
      handleChange,
      campusList,
      deptList,
      roleList,
      title,
      handleClose,
    }
  }
}
</script>

<style scoped lang="less">
.form_box {

}
</style>